@import "../../../index.less";

.bi-radio {
  & .radio-content, &.radio-content {
    .border-radius(8px);
    border: 1px solid @color-bi-border-radio;
    .box-sizing(border-box);
    .transition(all .1s);
    &:after {
      content: "";
    }
    &.hover, &:hover {
      border-color: @color-bi-border-hover-active-radio;
    }
  }
  &.active {
    & .radio-content, &.radio-content {
      border-color:  @color-bi-border-hover-active-radio;
      background-color: @color-bi-background-active-radio;
      &:after {
        width: 8px;
        height: 8px;
        display: table;
        position: absolute;
        top: 50%;
        left: 50%;
        .border-radius(4px);
        background-color: @color-bi-background-active-radio-content;
        .transform(translate(-50%, -50%));
        @transition: all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s;
        .transition(@transition);
      }
    }
  }
  &.disabled {
    & .radio-content, &.radio-content {
      background-color: @color-bi-background-disabled-radio;
      border-color: @color-bi-border-disabled-radio;
    }
    & .radio-content:after, &.radio-content:after {
      background-color: transparent;
    }
    &.active {
      & .radio-content, &.radio-content {
        background-color: @color-bi-background-disabled-active-radio;
        &:after {
          background-color: @color-bi-background-disabled-active-radio-content;
        }
      }
    }
  }
}

.bi-theme-dark {
  .bi-radio {
    & .radio-content, &.radio-content {
      border-color: @color-bi-border-radio-theme-dark;
      &.hover, &:hover {
        border-color: @color-bi-border-hover-active-radio-theme-dark;
      }
    }
    &.active {
      & .radio-content, &.radio-content {
        border-color:@color-bi-border-hover-active-radio-theme-dark;
        &:after {
          background-color: @color-bi-background-active-radio-content-theme-dark;
        }
      }
    }
    &.disabled {
      & .radio-content, &.radio-content {
        background-color: @color-bi-background-disabled-radio-theme-dark;
        &.hover, &:hover {
          border-color: @color-bi-border-radio-theme-dark;
        }
      }
      &.active {
        & .radio-content, &.radio-content {
          background-color: @color-bi-background-disabled-active-radio-theme-dark;
          border-color: @color-bi-border-disabled-radio-theme-dark;
          &:after {
            background-color: @color-bi-background-disabled-active-radio-content-theme-dark;
          }
        }
      }
    }
  }
}
